<template>
	<view class="banner r10" v-if="list.length">
		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" class="swiper"
		@change="change"
		circular
		>
			<swiper-item v-for="item,index in list" :key="index" @click="click(item)">
				<uv-image :src="$str.img(item.image)" mode="widthFix" width="100%" height="100%"></uv-image>
			</swiper-item>
		</swiper>
		<view class="dots t-flex center">
			<view class="dot round" v-for="_,index in list" :key="index" :class="{'active':current == index}"></view>
		</view>
	</view>
	
	
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { routeFn } from '../../lib/ts/util';
	
	defineProps({
		list:{
			type:Array<any>,
			default:[]
		}
	})
	
	let current = ref(0)
	const change = (e)=>{
		current.value = e.detail.current
	}
	
	
	const click=(e)=>{
		if(e.link){
			routeFn.to(e.link)
		}else if(e.content){
			uni.navigateTo({
				url:'/pages/public/bannerDetail?data='+encodeURIComponent(JSON.stringify(e.content))
			})
		}
	}
	
	
</script>

<style scoped lang="scss">
	.banner{
		position: relative;
		overflow: hidden;
		.swiper{
			height: 280rpx;
		}
		.dots{
			position: absolute;
			bottom: 16rpx;
			width: 100%;
			align-items: flex-end;
			view{
				width: 12rpx;
				height: 12rpx;
				background: #FFFFFF;
				opacity: 0.68;
				margin: 0 4rpx;
				transition: all 300ms; 
			}
			.active{
				opacity: 1;
				width: 14rpx;
				height: 14rpx;
			}
		}
	}
	

</style>